﻿<%request.setAttribute("path", request.getContextPath());%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>更改手机号-青鸟会员服务</title>
    <link rel="icon" href="${path}/jbs/images/ico.ico" type="image/x-icon">
    <link rel="stylesheet" href="${path}/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="${path}/assets/css/tailwind.output.css" />
    <link rel="stylesheet" href="${path}/assets/css/style.css" charset="utf-8">
    <script src="${path}/assets/js/jquery-1.11.1.min_044d0927.js" type="text/javascript"></script>
    <script
            src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
            defer
    ></script>
    <script src="${path}/assets/js/init-alpine.js"></script>
</head>
<body>
<div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" style="padding-top: 0;">
    <div
            class="flex-1 h-full max-w-4xl mx-auto rounded-lg dark:bg-gray-800"
    >
        <a href="${path}/Index"><img src="${path}/assets/img/logo/logo.png" alt="" style="margin:auto" class="p-6"></a>
        <div class="flex flex-col overflow-y-auto md:flex-row shadow-xl"
             style="box-shadow: 0 2rem 80px -5px rgb(0 0 0 / 50%); border-radius: 20px;"
        >
            <div class="h-32 md:h-auto md:w-1/2">
                <img
                        aria-hidden="true"
                        class="object-cover w-full h-full dark:hidden"
                        src="${path}/assets/img/login-office.jpeg"
                        alt="Office"
                />
                <img
                        aria-hidden="true"
                        class="hidden object-cover w-full h-full dark:block"
                        src="${path}/assets/img/login-office-dark.jpeg"
                        alt="Office"
                />
            </div>
            <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2 bg-white">
                <div class="w-full">
                    <h1
                            class=" text-xl font-semibold text-gray-700 dark:text-gray-200"
                            style="margin-bottom: 40px"
                    >
                        青鸟会员-更改手机号
                    </h1>
                    <form id="loginForm">
                        <label style="margin-bottom: 10px" class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">请输入新手机号</span>
                            <input
                                    class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                    required placeholder="请输入手机号码" name="phone" id="phone" onblur="checkPhone();" onfocus="clearNode()"
                            /><span id="sUserPhone" class="ErrorInfo" style="display: block;height: 20px"></span>
                        </label>
                        <label style="margin-bottom: 10px" class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">邮箱验证（敬请期待）</span><br>
                            <input
                                    class="block mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                    placeholder="请输入邮箱验证码" name="email" id="email" disabled style="width: 70%;display: inline-block"
                            /><a class="inline-block ml-4 mt-1 text-center text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                 style="width: 25%;color: black">发送</a><span id="sEmail" class="ErrorInfo" style="display: block;height: 20px"></span>
                        </label>
                        <!-- You should use a button here, as the anchor is only used for the example  -->
                        <button type="button" onclick="btnSubmit()"
                                class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"

                        >
                            修改手机号
                        </button>
                    </form>
                    <hr class="my-8"  style="margin: 15px 0"/>

                    <a href="${path}/Login">
                    <button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray">
                        <i class="fa fa-info w-4 h-4 mr-2"></i>
                        返回
                    </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function clearNode(){
        spanNode = document.getElementById("sEmail");
        spanNode.innerHTML="";
    }
    function btnSubmit(){
        if(checkPhone()){
            let userphone = document.getElementById("phone").value;
            let spanNode = document.getElementById("sEmail");
            $.ajax({
                url:"${path}/checkPhoneUpdateServlet",
                type: "post",
                data:"newphone="+userphone,
                dataType: "text",
                async:false,
                beforeSend:function (){},
                success:function (result){
                    if(result=="true"){
                        spanNode.innerHTML="修改成功";
                        window.location.replace("${path}/logoutServlet");
                    }else if(result=="-1"){
                        alert("登录已过期，请重新登录！");
                        window.location.replace("${path}/Login");
                    }else{
                        alert(result);
                    }
                }
            })
        }else{
            alert("请正确地输入注册信息！")
        }
    }
    //验证手机号
    function checkPhone() {
        let userphone = document.getElementById("phone").value;
        let spanNode=document.getElementById("sUserPhone");
        var reg = /^[0-9]{11}$/
        if (userphone === "") {
            spanNode.innerHTML="手机号不能为空！"
            return false;
        }
        if (reg.test(userphone)) {
            var bool =false
            checkPhoneAjax().done(function(result){
                if(result=="true"){
                    spanNode.innerHTML="手机号可以使用";
                    return bool= true;
                }else{
                    spanNode.innerHTML="手机号已被注册";
                    return bool= false;
                }
            })
            return bool;
        }else {
            spanNode.innerHTML="手机号不符合规范！"
            return false;
        }
    }
    function checkPhoneAjax(){
        let userphone = document.getElementById("phone").value;
        let spanNode=document.getElementById("suserPhone");
        return $.ajax({
            url:"${path}/CheckPhone",
            type:"post",
            data:"phone="+userphone,//请求的数据格式
            dataType:"text",//返回的数据格式
            async:false,
            //请求前调用的函数
            beforeSend:function(){
            },
            //请求成功调用的函数
            success:function(result){
            },
            //请求错误调用的函数
            error:function(){
            },
            complete:function (){
            },
        });
    }

</script>
<script>


</script>

</body>
</html>
